<template>
  <header class="header">
    <el-row
      type="flex"
      justify="space-between"
      class="main"
    >

      <!-- logo -->
      <div class="logo">
        <nuxt-link to="/">
          <img
            src="http://157.122.54.189:9093/images/logo.jpg"
            alt=""
          >
        </nuxt-link>
      </div>

      <!-- 菜单栏 -->
      <el-row
        type="flex"
        class="navs"
      >
        <nuxt-link to="/">首页</nuxt-link>
        <nuxt-link to="/post">旅游攻略</nuxt-link>
        <nuxt-link to="/hotel">酒店</nuxt-link>
        <nuxt-link to="/air">国内机票</nuxt-link>
      </el-row>

      <!-- 登录/用户信息 -->
      <el-row
        type="flex"
        align="middle"
      >

        <!-- 如果用户存在则展示用户信息，用户数据来自store -->
        <el-dropdown v-if="userInfo.token">
          <el-row
            type="flex"
            align="middle"
            class="el-dropdown-link"
          >
            <nuxt-link to="#">
              <img :src="$axios.defaults.baseURL + userInfo.user.defaultAvatar" />
              {{userInfo.user.nickname}}
            </nuxt-link>
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </el-row>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <nuxt-link to="#">个人中心</nuxt-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="handleLogOut">退出</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 不存在用户信息展示登录注册链接 -->
        <nuxt-link
          to="/user/login"
          class="account-link"
          v-else
        >
          登录 / 注册
        </nuxt-link>
      </el-row>
    </el-row>
  </header>
</template>
<script>
import { mapState, mapMutations } from "vuex";

export default {
  computed: {
    // ...mapState("模块的名称",["该模块下的数据"])
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 获取 退出 功能
    ...mapMutations("user", ["logOut"]),
    async handleLogOut() {
      try {
        // 1 弹窗提示用户
        await this.$confirm("您确定退出吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        // 2 确定 再执行退出
        this.logOut();
        // 3 重新跳转到登录页面
        this.$router.push("/user/login");
      } catch (error) {
        console.log("用户取消退出了"); 
      }
    },
  },
};
</script>
<style scoped lang="less">
.header {
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-bottom: 1px #ddd solid;
  box-shadow: 0 3px 0 #f5f5f5;
  box-sizing: border-box;

  .main {
    width: 1000px;
    margin: 0 auto;
  }

  .logo {
    width: 156px;
    padding-top: 8px;

    img {
      display: block;
      width: 100%;
    }
  }

  .navs {
    margin: 0 20px;
    flex: 1;

    a {
      display: block;
      padding: 0 20px;
      height: 60px;
      box-sizing: border-box;

      &:hover,
      &:focus,
      &:active {
        border-bottom: 5px #409eff solid;
        color: #409eff;
      }
    }

    /deep/ .nuxt-link-exact-active {
      background: #409eff;
      color: #fff !important;
    }
  }

  .message {
    height: 36px;
    line-height: 1;
    cursor: pointer;
    .el-icon-bell {
      margin-right: 2px;
      font-size: 18px;
    }
  }

  .el-dropdown-link {
    margin-left: 20px;

    &:hover {
      img {
        border-color: #409eff;
      }
    }

    a {
      display: block;
    }

    img {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      border: 2px #fff solid;
      border-radius: 50px;
    }
  }

  .account-link {
    font-size: 14px;
    margin-left: 10px;
    color: #666;

    &:hover {
      color: #409eff;
      text-decoration: underline;
    }
  }
}
</style>